<template>
  <div class="tabs">
    <el-tag
      size="small"
      v-for="(item,index) in tabs"
      :closable="item.name !== 'home'"
      :effect="item.path == $route.path ? 'dark' : 'plain'"
      :key="item.name"
      @click="tagClick(item,index)"
      @close="tagClose(item,index)"
      >{{ item.label }}</el-tag
    >
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "CommonTag",
  data() {
    return {};
  },
  computed: {
    ...mapState({
      tabs: (state) => state.tab.tabsList,
    }),
  },
  methods: {
    ...mapMutations({
        removeTab:'removeTab'
    }),
    tagClick(item) {
        this.$router.push({path:item.path})
    },
    tagClose(item,index) {
        this.removeTab(item)
        const length = this.tabs.length - 1
        if(item.name != this.$route.name){
            return
        }
        if(index == length){
            this.$router.push({
                name:this.tabs[index - 1].name
            })
        }else{
            if(length==0){
                index = 0
            }
            this.$router.push({
                name:this.tabs[index].name
            })
        }
    },
  },
};
</script>

<style lang="less" scoped>
    .tabs{
        padding:10px;
        .el-tag{
            margin: 0 5px;
            cursor: pointer;
        }
    }
</style>
